<!--
粒子系统--飞机
 -->
<template>
  <div class="container">
    <div id="toolbar"></div>
    <div id="cesiumContainer"> </div>
  </div>
</template>

<script>
  // import {
  //   aaa
  // } from '../../libs/js/Sandcastle-header.js'
  
  export default {
    name: "cesiumviewer",
    data() {
      return {
        viewer: {},
        rocketOptions: {},
        cometOptions: {},
        cameraLocation: {},
        particleCanvas: null,
        planePosition: {},
        particlesOffset: {},
        scratchOffset: {},
        rocketSystems: [],
        cometSystems: [],
      }
    },
    mounted() {
      var Cesium = this.Cesium;
      this.viewer = new Cesium.Viewer("cesiumContainer", {
        shouldAnimate: true,
      });
      this.myCesium = Cesium
      this.planePosition = Cesium.Cartesian3.fromDegrees(
        -75.59777,
        40.03883,
        800.0
      );
      this.particlesOffset = new Cesium.Cartesian3(
        -8.950115473940969,
        34.852766731753945,
        -30.235411095432937
      );
      this.cameraLocation = Cesium.Cartesian3.add(
        this.planePosition,
        this.particlesOffset,
        new Cesium.Cartesian3()
      );

      this.resetCamera();
      this.load();
      this.scratchOffset = new Cesium.Cartesian3();


      this.createParticleSystems(this.rocketOptions, this.rocketSystems);
      this.createParticleSystems(this.cometOptions, this.cometSystems);

      var options = [{
          text: "Comet Tail",
          onselect: this.CometTail,
        },
        {
          text: "Rocket Thruster",
          onselect: this.RocketThruster,
        },
      ];

      Sandcastle.addToolbarMenu(options);
      Sandcastle.finishedLoading();

    },
    methods: {
      CometTail() {
        this.showAll(this.rocketSystems, false);
        this.showAll(this.cometSystems, true);
        this.resetCamera();
      },
      RocketThruster() {
        this.showAll(this.cometSystems, false);
        this.showAll(this.rocketSystems, true);
        this.resetCamera();
      },
      resetCamera() {
        var Cesium = this.Cesium;
        this.viewer.camera.lookAt(
          this.cameraLocation,
          new Cesium.Cartesian3(-450, -300, 200)
        );
      },
      getImage() {
        var Cesium = this.Cesium;
        if (!Cesium.defined(this.particleCanvas)) {
          //console.log('!defined')
          this.particleCanvas = document.createElement("canvas");
          this.particleCanvas.width = 20;
          this.particleCanvas.height = 20;
          var context2D = this.particleCanvas.getContext("2d");
          context2D.beginPath();
          context2D.arc(8, 8, 8, 0, Cesium.Math.TWO_PI, true);
          context2D.closePath();
          context2D.fillStyle = "rgb(255, 255, 255)";
          context2D.fill();
        }
        return this.particleCanvas;
      },
      load() {
        var Cesium = this.Cesium;
        // Add plane to scene
        var hpr = new Cesium.HeadingPitchRoll(
          0.0,
          Cesium.Math.PI_OVER_TWO,
          0.0
        );
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(
          this.planePosition,
          hpr
        );
        var entity = this.viewer.entities.add({
          model: {
            uri: "../../static/models/Cesium_Air.glb",
            scale: 3.5,
          },
          position: this.planePosition,
          orientation: orientation,
        });

        // creating particles model matrix

        // creating the particle systems
        this.rocketOptions = {
          numberOfSystems: 50.0,
          iterationOffset: 0.1,
          cartographicStep: 0.000001,
          baseRadius: 0.0005,

          colorOptions: [{
              minimumRed: 1.0,
              green: 0.5,
              minimumBlue: 0.05,
              alpha: 1.0,
            },
            {
              red: 0.9,
              minimumGreen: 0.6,
              minimumBlue: 0.01,
              alpha: 1.0,
            },
            {
              red: 0.8,
              green: 0.05,
              minimumBlue: 0.09,
              alpha: 1.0,
            },
            {
              minimumRed: 1,
              minimumGreen: 0.05,
              blue: 0.09,
              alpha: 1.0,
            },
          ],
        };

        this.cometOptions = {
          numberOfSystems: 100.0,
          iterationOffset: 0.003,
          cartographicStep: 0.0000001,
          baseRadius: 0.0005,

          colorOptions: [{
              red: 0.6,
              green: 0.6,
              blue: 0.6,
              alpha: 1.0,
            },
            {
              red: 0.6,
              green: 0.6,
              blue: 0.9,
              alpha: 0.9,
            },
            {
              red: 0.5,
              green: 0.5,
              blue: 0.7,
              alpha: 0.5,
            },
          ],
        };
      },

      forceFunction(options, iteration) {

        var Cesium = this.Cesium;
        return function(particle, dt) {
          let scratchCartesian3 = new Cesium.Cartesian3();
          let scratchCartographic = new Cesium.Cartographic();
          dt = Cesium.Math.clamp(dt, 0.0, 0.05);
          scratchCartesian3 = Cesium.Cartesian3.normalize(
            particle.position,
            new Cesium.Cartesian3()
          );
          scratchCartesian3 = Cesium.Cartesian3.multiplyByScalar(
            scratchCartesian3,
            -40.0 * dt,
            scratchCartesian3
          );

          scratchCartesian3 = Cesium.Cartesian3.add(
            particle.position,
            scratchCartesian3,
            scratchCartesian3
          );

          scratchCartographic = Cesium.Cartographic.fromCartesian(
            scratchCartesian3,
            Cesium.Ellipsoid.WGS84,
            scratchCartographic
          );

          var angle =
            (Cesium.Math.PI * 2.0 * iteration) / options.numberOfSystems;
          iteration += options.iterationOffset;
          scratchCartographic.longitude +=
            Math.cos(angle) * options.cartographicStep * 30.0 * dt;
          scratchCartographic.latitude +=
            Math.sin(angle) * options.cartographicStep * 30.0 * dt;

          particle.position = Cesium.Cartographic.toCartesian(
            scratchCartographic
          );
        };
      },

      createParticleSystems(options, systemsArray) {
        var length = options.numberOfSystems;
        var Cesium = this.Cesium;
        var matrix4Scratch = new Cesium.Matrix4();
        var imageSize = new Cesium.Cartesian2(15.0, 15.0);
        var translationOffset = Cesium.Matrix4.fromTranslation(
          this.particlesOffset,
          new Cesium.Matrix4()
        );
        var translationOfPlane = Cesium.Matrix4.fromTranslation(
          this.planePosition,
          new Cesium.Matrix4()
        );
        var particlesModelMatrix = Cesium.Matrix4.multiplyTransformation(
          translationOfPlane,
          translationOffset,
          new Cesium.Matrix4()
        );
        console.log('length', length)

        for (var i = 0; i < length; ++i) {
          let scratchAngleForOffset =
            (Math.PI * 2.0 * i) / options.numberOfSystems;
          this.scratchOffset.x +=
            options.baseRadius * Math.cos(scratchAngleForOffset);
          this.scratchOffset.y +=
            options.baseRadius * Math.sin(scratchAngleForOffset);

          var emitterModelMatrix = Cesium.Matrix4.fromTranslation(
            this.scratchOffset,
            matrix4Scratch
          );

          var color = Cesium.Color.fromRandom(
            options.colorOptions[i % options.colorOptions.length]
          );
          var force = this.forceFunction(options, i, );
          var item = this.viewer.scene.primitives.add(
            new Cesium.ParticleSystem({
              image: this.getImage(),
              startColor: color,
              endColor: color.withAlpha(0.0),
              particleLife: 3.5,
              speed: 0.00005,
              imageSize: imageSize,
              emissionRate: 40.0, //粒子数
              emitter: new Cesium.CircleEmitter(0.1),
              lifetime: 0.1,
              updateCallback: force,
              modelMatrix: particlesModelMatrix,
              emitterModelMatrix: emitterModelMatrix,
            })
          );
          systemsArray.push(item);
        }
      },
      showAll(systemsArray, show) {      
        var length = systemsArray.length;
        for (var i = 0; i < length; ++i) {
          systemsArray[i].show = show;
        }
      },

    }
  }
</script>

<style scoped="scoped">
  .container {
    width: 100%;
    height: 100%;
  }

  #cesiumContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    padding: 0;
    /*  overflow: hidden; */
  }
</style>
